import React from 'react';
import { connect } from 'react-redux';
import {Image, View, Swiper, SwiperItem } from "@tarojs/components";
import {useDidShow} from "@tarojs/taro";
import picClosed from './icon_guanbi.png'

import './index.scss'


const CommentImagePreview = ({dispatch,previewImage={}})=>{
  useDidShow(() => {
    handleColse()
  });

  const handleChange = (val) => {
    if(previewImage.urls.length){
      dispatch({
        type:'globalComponent/previewImage',
        payload:{
          previewImage:{
            urls:previewImage.urls,
            current:val.detail.current
          }
        }
      })
    }
  }

  const handleColse = () => {
    dispatch({
      type:'globalComponent/previewImage',
      payload:{
        previewImage:{
          urls:[],
          current:0
        }
      }
    })
  }

  if(previewImage.urls&&previewImage.urls.length){
    return (
      <View className="commentImagePreview" onClick={handleColse}>
        <View className="commentImagePreviewContent">
          <View className="top">
            <View className="closeBtn" onClick={handleColse}>
              <Image className="closeBtnPic" src={picClosed} />
            </View>
            {previewImage.current+1}/{previewImage.urls.length}
          </View>
          <Swiper className="swiperBox" current={previewImage.current} onChange={handleChange}>
            {previewImage.urls.map((item,idx)=>(
              <SwiperItem key={idx} className="swiperBoxItem">
                <Image className="swiperBoxImage" src={item} mode="aspectFit" />
              </SwiperItem>
            ))}
          </Swiper>
        </View>
      </View>
    )
  }else{
    return <View className="none"></View>
  }
}

export default connect(({globalComponent}) => ({previewImage:globalComponent.previewImage}))(CommentImagePreview);
